import { defineComponent, reactive } from "vue";
import styles from "./promptPopup.module.less";

export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      isShow: false,
      form: {
        balance: '1000',
        mobile: '',
        code: '',
        syncCode: '',
        checked: false,
      }
    })
    // 打开弹窗
    const open = () => {
      state.isShow = true;
    }
    // 确认登录
    const submit = () => {

    }
    expose({
      open,
    })
    return () => (
      <div class={styles['promptPopup-floating']} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles.title}>余额不足提醒</div>
          <div class={styles.container}>
            <div class={styles['sign-rows']}>
              <div class={styles['sign-row']}>
                <div class={styles['row-label']}>提醒余额：</div>
                <div class={styles['input-box']}>
                  <input v-model={state.form.balance} />
                </div>
                <span>元</span>
              </div>
              <div class={styles.tips}>提醒余额只能是<span>100的整数倍</span></div>
              <div class={styles['sign-row']}>
                <div class={styles['row-label']}>接收手机号：</div>
                <div class={styles['input-box']}>
                  <input v-model={state.form.mobile} />
                </div>
              </div>
              <div class={styles['sign-row']}>
                <div class={styles['row-label']}>图形验证码：</div>
                <div class={styles['input-box']}>
                  <input v-model={state.form.mobile} placeholder="请输入" />
                </div>
                <div class={styles['code-img']}>

                </div>
              </div>
              <div class={styles['sign-row']}>
                <div class={styles['row-label']}>短信验证码：</div>
                <div class={styles['input-box']}>
                  <input v-model={state.form.syncCode} placeholder="请输入" />
                </div>
                <div class={styles['send-btn']}>获取动态码</div>
              </div>
              <div class={styles['check-box']}>
                <a-checkbox v-model:checked={state.form.checked}></a-checkbox>
                <span class={styles.spans}>关闭提醒</span>
              </div>
            </div>
          </div>
          <div class={styles.footer}>
            <div class={styles['submit-btn']} onClick={() => { submit() }}>确认</div>
            <div class={styles['cancel-btn']} onClick={() => { state.isShow = false }}>取消</div>
          </div>
        </div>
      </div>
    )
  }
})